<template>
  <div class="contaniner" >
    <el-container ref="contaniner">
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          active-text-color="#000000"
        >
         <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2">登录中心</el-menu-item>
          <el-menu-item index="3">
            <el-button
            class="title-menu-btn"
              plain
              @click="open3">
              注册中心
            </el-button>
          </el-menu-item>
          <el-menu-item index="4">
             <el-button
            class="title-menu-btn"
              plain
              @click="open3">
              公司概况
            </el-button>
          </el-menu-item>
          <el-menu-item index="5">
             <el-button
            class="title-menu-btn"
              plain
              @click="open3">
              关于我们
            </el-button>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main ref="limiter"> 
        <div class="limiter" ref="limitera">
          <transition name="el-fade-in-linear">
            <login-main v-show="showLogin"></login-main>
          </transition>
          <transition name="el-fade-in-linear">
            <home v-show="!showLogin"></home>
          </transition>
        </div>
      </el-main>
      <el-footer height="30px">
          <small>&copy; 2022 <a href="http://1.117.171.162">green.cick-y.xyz</a>  余维华 <a href="https://beian.miit.gov.cn/">闽ICP备2021016516号-1</a> </small>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import LoginMain from '@/components/Index/LoginMain'
import Home from '@/components/Index/Home'
import {GetBingImage} from '../axios'
export default {
  data() {
    return {
        activeIndex:'1',
        showLogin: false
    };
  },
  components:{
      LoginMain,
      Home
  },
  mounted(){
       this.getBingImageClick()
       this.config()
  },
  methods: {
      handleSelect(data){
        switch (data){
            case "1":
                this.showLogin=false
              break
            case "2":
                this.showLogin=true
              break
        }
      },
       getBingImageClick(){
            // https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=zh-CN
            // {"images":[{"startdate":"20220513","fullstartdate":"202205131600","enddate":"20220514","url":"/th?id=OHR.WindmillDay_ZH-CN3115996668_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp","urlbase":"/th?id=OHR.WindmillDay_ZH-CN3115996668","copyright":"金德代克风车群，荷兰 (© Achim Thomae/Getty Images)","copyrightlink":"https://www.bing.com/search?q=%E9%87%91%E5%BE%B7%E4%BB%A3%E5%85%8B%E9%A3%8E%E8%BD%A6%E7%BE%A4&form=hpcapt&mkt=zh-cn","title":"可靠的移水器","quiz":"/search?q=Bing+homepage+quiz&filters=WQOskey:%22HPQuiz_20220513_WindmillDay%22&FORM=HPQUIZ","wp":true,"hsh":"fca2d6f9eef4dd480960de7f09e15522","drk":1,"top":1,"bot":1,"hs":[]}],"tooltips":{"loading":"正在加载...","previous":"上一个图像","next":"下一个图像","walle":"此图片不能下载用作壁纸。","walls":"下载今日美图。仅限用作桌面壁纸。"}}
            // 拿到数据中url字段，前面加上https://cn.bing.com 就可以获取网络图片
             var w = document.documentElement.clientWidth || document.body.clientWidth;
            var h = document.documentElement.clientHeight || document.body.clientHeight;  
            GetBingImage().then(sucess=>{
                this.$nextTick(()=>{
                  console.log(sucess);
                     this.$refs.limitera.style.backgroundImage="url(https://cn.bing.com"+sucess.images[0].url+ ")"
                    //  this.$refs.contaniner.style.backgroundImage="url(https://cn.bing.com"+sucess.images[0].url+ ")"
                  
                     this.$refs.limitera.style.width=w+'px'
                     this.$refs.limitera.style.height=h+'px'
                });
            })
           
            console.log(w+','+h);
       },
       open3() {
        this.$notify.info({
          title: '抱歉',
          message: '功能暂未完善，敬请期待！'
        });
      },
      config(){
          function IsPC() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ["Android", "iPhone",
                        "SymbianOS", "Windows Phone",
                        "iPad", "iPod"];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }
        if(!IsPC()){
          console.log("BY PHONE")
          this.$router.push('/phone')
        }
      }
  },
};
</script>

<style scoped>
*{
  height: 100%;
  width: 100%;
}
.el-contaniner{
  height: 100%;
  background-color:#333 ;
}
.title-menu-btn{
  border:none;
}
.limiter{
  height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  background-color: rgba(red, green, blue, 0);
}
.el-header {
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-menu-item{
    width: 20%;
}
.el-footer {
  background-color: #676767;
  color: #333;
  text-align: center;
  line-height: 30px;
  position: fixed;
  width: 100%;
  bottom: 0;
}
.el-aside {
  background-color: #c3c4c4;
  color: #333;
  text-align: center;
  line-height: 200px;

}

.el-main {
  height:100%;
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 670px;
  padding:0;
  margin: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>